<template>
  <view class="example-page">
    <view class="header">
      <text class="title">VueX Token管理示例</text>
    </view>
    
    <view class="content">
      <!-- 显示当前登录状态 -->
      <view class="status-section">
        <text class="section-title">登录状态</text>
        <text class="status-text" :class="loginStatus ? 'logged-in' : 'not-logged'">
          {{ loginStatus ? '已登录' : '未登录' }}
        </text>
      </view>
      
      <!-- 显示用户信息 -->
      <view class="info-section" v-if="loginStatus">
        <text class="section-title">用户信息</text>
        <view class="info-item">
          <text class="label">手机号：</text>
          <text class="value">{{ mobile }}</text>
        </view>
        <view class="info-item">
          <text class="label">Token：</text>
          <text class="value token-value">{{ token.substring(0, 20) }}...</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="actions">
        <button class="btn" @click="refreshData">刷新数据</button>
        <button class="btn logout-btn" @click="handleLogout" v-if="loginStatus">登出</button>
        <button class="btn login-btn" @click="goToLogin" v-else>去登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 这些数据将从VueX中获取
    }
  },
  
  computed: {
    // 使用VueX getters获取数据
    loginStatus() {
      return this.$store.getters.getLoginStatus
    },
    token() {
      return this.$store.getters.getToken
    },
    mobile() {
      return this.$store.getters.getMobile
    },
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  
  onLoad() {
    // 页面加载时检查登录状态
    this.checkLoginStatus()
  },
  
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      if (!this.loginStatus) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        // 可以跳转到登录页面
        // uni.reLaunch({ url: '/pages/login/login' })
      }
    },
    
    // 刷新数据
    refreshData() {
      // 从VueX重新获取最新数据
      const currentToken = this.$store.getters.getToken
      const currentMobile = this.$store.getters.getMobile
      
      console.log('当前Token:', currentToken)
      console.log('当前手机号:', currentMobile)
      
      uni.showToast({
        title: '数据已刷新',
        icon: 'success'
      })
    },
    
    // 登出
    handleLogout() {
      uni.showModal({
        title: '确认登出',
        content: '确定要登出吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用VueX的logout action
            this.$store.dispatch('logout')
            
            uni.showToast({
              title: '已登出',
              icon: 'success'
            })
            
            // 跳转到登录页面
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }, 1500)
          }
        }
      })
    },
    
    // 跳转到登录页面
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
}
</script>

<style scoped>
.example-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}

.status-section, .info-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.status-text {
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}

.logged-in {
  background-color: #e8f5e8;
  color: #4caf50;
}

.not-logged {
  background-color: #ffe8e8;
  color: #f44336;
}

.info-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: center;
}

.label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
}

.value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.token-value {
  font-family: monospace;
  background-color: #f0f0f0;
  padding: 10rpx;
  border-radius: 8rpx;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn {
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.btn:not(.logout-btn):not(.login-btn) {
  background-color: #007AFF;
  color: #fff;
}

.logout-btn {
  background-color: #ff4444;
  color: #fff;
}

.login-btn {
  background-color: #4caf50;
  color: #fff;
}
</style>

